<template>
	<view id="app">
		<view class="container">
			<view class="detail_title">
				<view class="text1">我期待的对象事这样的  </view>
				<view class="text2">（*必选）</view>
			</view>
			
			<view class="mode">
				<view class="radio_name name">性别</view>
				<view class="radio">
					<view class="radio_button gengder">
						<view class="text3">我喜欢女的</view>
					</view>
					<view class="radio_button_click gengder">
						<view  class="text3">我喜欢男的</view>
					</view>
				</view>
			</view>
			
			<view class="mode">
				<view class="radio_name name">省份</view>
				<view class="radio_button area">
					<view class="text3">同一个省份</view>
				</view>
				<view class="radio_button_click area">
					<view  class="text3">不同省份</view>
				</view>
				<view class="radio_button_click area">
					<view  class="text3">都可以</view>
				</view>
			</view>
			
			<view class="mode">
				<view class="radio_name name">年龄</view>
				<view >
					<input type="number" maxlength="3" class="input_age" name="startAge">
				</view>
				<view class="radio_name age">至</view>
				<view >
					<input type="number"  maxlength="3" class="input_age" name="endAge" >
				</view>
				<view class="radio_name age">(岁)</view>
			</view>
			
			<view>
				<view class="text1">个人描述</view>
				<view class="topic_mode">
					<textarea class="topicContent" placeholder="听说写的越认真,魅力值越高哟~"/>
				</view>
			</view>
			<view>
				<view class="text1">最近生活状态（选填）</view>
				<view class="topic_mode">
					<textarea class="topicContent" placeholder="仔细想一想噢~(不会作为系统匹配条件)"/>
				</view>
			</view>
			<view>
				<view class="text1">说说你为什么要参加本次活动</view>
				<view class="topic_mode">
					<textarea class="topicContent" placeholder="认真回答,有助于你更好地体验活动哟"/>
				</view>
			</view>
			
			
			<view class="confirm" @click="upFile">下一步</view>
			<view class="mint-popup code_mask" style="display: none; top: 300px;">
				<view class="wrap_code">
					<view class="tips2">恭喜你报名成功,匹配查询步骤如下</view>
					<view class="tip_gray">（每周四下午18点推出匹配结果）</view>
					<view class="tips1">
						1：
						<span class="font_pink2">长按识别二维码</span>进入订阅号
					</view>
					<view class="tips1">
						2：点击菜单栏
						<span class="font_pink2">" 72小时CP "</span></view>
					<view class="tips1">
						3：选择上拉菜单中的
						<span class="font_pink2">" 匹配查询 "</span></view> <img src="" class="code_img">
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
			
		},
		onShow() {
			document.title = "72小时cp报名活动-填写资料";
		},
		methods: {
			
		}
	}
</script>

<style>
	.container {
	    margin: 20px auto;
		width: 90%;
	}
	.detail_title {
		/* margin: 20rpx 10rpx 10rpx 40rpx; */
	}
	.text1 {
		font-size: 30rpx;
		display:inline;
	}
	.text2 {
		color: #e64340;
		display:inline;
	}
	.mode {
		margin-top: 10rpx;
		margin-bottom: 40rpx;
		height: 90rpx;
		background-color: #e5e5e5;
	}
	.name {
		margin: auto 30rpx;
	}
	.age {
		margin: auto 20rpx;
	}
	.radio_name {
		float: left;
		color: #FF3366;
		font-size: 35rpx;
		height:90rpx; line-height:90rpx; 
	}
	.radio{
		float: left;
	}
	.gengder {
		margin: 20rpx 60rpx 20rpx 10rpx;
	}
	.area {
		margin: 20rpx 30rpx 20rpx 10rpx;
	}
	.radio_button {
		height: 50rpx;
		background-color: hsla(0,0%,100%,.95);
		border-style: solid;
		border-color: #d1d1d1;
		float: left;
		border-radius:10px 10px 10px 10px;
	}
	.radio_button_click {
		height: 50rpx;
		background-color: #f18fa8;
		border-style: solid;
		border-color: #d1d1d1;
		float: left;
		border-radius:10px 10px 10px 10px;
	}
	.text3 {
		font-size: 25rpx;
		float: right;
		height:50rpx; line-height:50rpx;
		margin: auto 10rpx;
	}
	.input_age {
		text-align:center;
		font-size: 25rpx;
		width: 120rpx;
		margin: 20rpx 10rpx 20rpx 10rpx;
		height: 50rpx;
		background-color: hsla(0,0%,100%,.95);
		border-style: solid;
		border-color: #d1d1d1;
		float: left;
		border-radius:10px 10px 10px 10px;
	}
	.topic_mode {
		margin-top: 20rpx;
		margin-bottom: 40rpx;
		padding: 5rpx;
		background-color: #e5e5e5;
	}
	.topicContent {
		font-size: 25rpx;
		padding: 10rpx auto;
		width: 100%;
		display: block;
		position: relative;
		line-height: normal;
	}
	
	.confirm {
	    margin: 40px auto;
	    background-color: #f86287;
	    color: #fff;
	    width: 80%;
	    border-radius: 10vw;
	    padding: 2vw;
	    box-sizing: border-box;
	    text-align: center;
	}
	
	.code_mask {
	    width: 100%;
	    border-radius: 20px;
	    text-align: center;
	    padding-top: 20px;
	    margin-top: 20px;
	}
	.mint-popup {
	    position: fixed;
	    background: #fff;
	    top: 50%;
	    left: 50%;
	    transform: translate3d(-50%,-50%,0);
	    -webkit-backface-visibility: hidden;
	    backface-visibility: hidden;
	    transition: .2s ease-out;
	}
	
</style>
